<template>
    <view class="content">
        <view>
            <van-tabs v-model:active="active" shrink @click-tab="onClickTab">
                <van-tab v-for="i in navlist" :title="i.text" :line-width="20"></van-tab>
            </van-tabs>
        </view>
        <view>
            <van-skeleton title :row="3" class="pd40" v-show="loadingShow" />
        </view>
        <view>
            <view v-for="i in dataList.arr" class="pd20 bdline">
                <bolg-item :item="i" @getSon="getSon"></bolg-item>
            </view>
        </view>

        <view class="edit" @click="toPage">
            <view class="iconfont icon-icon-test12"></view>
        </view>
        <uni-load-more :status="status"></uni-load-more>
    </view>
</template>

<script setup>
    import {
        onMounted,
        reactive,
        ref
    } from 'vue';
    import {
        store,
    } from '@/uni_modules/uni-id-pages/common/store.js'
    import {
        onReachBottom
    } from '@dcloudio/uni-app';
    const db = uniCloud.database()
    const dbCmd = db.command;
    const navlist = [{
            text: '最新',
            value: 'publish_date'
        },
        {
            text: '热门',
            value: 'view_count'
        },
    ];
    let active = ref();
    let loadingShow = ref(true);
    let dataList = reactive({
        arr: []
    });
    // 切换tabs
    let ckTabNum = ref(0);
    const onClickTab = (e) => {
        loadingShow.value = true;
        dataList.arr = {};
        ckTabNum.value = e.name;
        getData();
    };

    //查询
    let status = ref('loading');
    let noMore = ref(false);

    function getData() {
        let artTeam = db.collection('fyquanzi_art').where(`delState!=true`).field(
                "title,user_id,des,imgUrl,province,article_status,view_count,like_count,comment_count,publish_date")
            .getTemp();
        let userTeam = db.collection('uni-id-users').field("_id,username,nickname,avatar_file").getTemp();
        db.collection(artTeam, userTeam).orderBy(navlist[ckTabNum.value].value, "desc").skip(dataList.arr.length)
            .limit(5).get().then(
                async res => {
                    let arr = [...dataList.arr, ...res.result.data];
                    if (res.result.data.length <= 4) {
                        noMore.value = true;
                    }
                    //是否为自己点赞
                    if (store.hasLogin) {
                        let arrId = [];
                        arr.map(item => {
                            arrId.push(item._id);
                        })
                        let likeRes = await db.collection('quanzi_like').where({
                            article_id: dbCmd.in(arrId),
                            user_id: uniCloud.getCurrentUserInfo().uid
                        }).get();
                        likeRes.result.data.map(item => {
                            let findIndex = arr.findIndex(find => {
                                return item.article_id == find._id;
                            });
                            if (findIndex != -1) {
                                arr[findIndex].myLike = true;
                            } else {
                                arr[findIndex].myLike = false;
                            }
                        });
                    }
                    dataList.arr = arr;
                    loadingShow.value = false;
                    console.log(dataList.arr);
                })
    }

    onReachBottom(() => {
        if (noMore.value) {
            status.value = 'no-more'
            return;
        }
        getData();
    })
    //跳转
    function toPage() {
        uni.navigateTo({
            url: '/pages/edit/edit'
        })
    }

    //接受子组件参数
    function getSon(e) {
        console.log(e);
        dataList.arr = [];
        getData();
    }


    onMounted(() => {
        getData();
    })
</script>

<style lang="scss" scoped>
    .edit {
        width: 120rpx;
        height: 120rpx;
        background-color: #0199fe;
        border-radius: 50%;
        color: #fff;
        position: fixed;
        z-index: 100;
        bottom: 150rpx;
        right: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 20rpx rgba(1, 153, 254, 0.8);
        opacity: 0.85;

        .iconfont {
            font-size: 48rpx;
        }
    }
</style>